<template>
  <div style="display:flex;flex-direction:column;justify-content: center;align-items:center;">
    <div
      id="choosestock"
      style="padding-top:85px;display:flex;flex-direction:row;justify-content: center;width:100%;"
    >
      <!-- 时间选择 -->
      <div style="width:80%;margin:20px 0px;display: flex;justify-content: space-between;">
        <div>
          <span>股票：</span>
          <!-- <el-select v-model="stocknumber" style="margin-right:50px;" filterable placeholder="请选择">
            <el-option v-for="item in stocknumberList" :key="item.stocknumber" :label="item.stocknumber+' '+item.stockname" :value="item.stocknumber"></el-option>
          </el-select> -->
          <!-- <el-input type="text" v-model="stocknumber" placeholder="请输入股票代码" @oninput="getStocknumberData"  clearable>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-input> -->
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="stocknumber"
            :fetch-suggestions="getStocknumberData"
            placeholder="请输入内容"
            @select="handleSelect">
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{item.stocknumber}}{{ item.stockname }}</div>
            </template>
          </el-autocomplete>
          
          <span>股票日期：</span>
          <el-date-picker
            :picker-options="pickerDisabled"
            unlink-panels
            style="margin-right:20px"
            v-model="time"
            type="daterange"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span style="margin-right:5px;">时间周期</span>
          <el-select v-model="TimeCycle" placeholder="请选择">
            <el-option key="1" label="1分钟" value="1"></el-option>
            <el-option key="2" label="15分钟" value="2"></el-option>
            <el-option key="3" label="30分钟" value="3"></el-option>
            <el-option key="4" label="1小时" value="4"></el-option>
            <el-option key="5" label="2小时" value="5"></el-option>
            <el-option key="6" label="1天" value="6"></el-option>
            <el-option key="7" label="2天" value="7"></el-option>
            <el-option key="8" label="7天" value="8"></el-option>
          </el-select>
        </div>
        <button class="btn" @click="getStrategyData">查询</button>
      </div>
    </div>
    <!--股票行情显示-->
    <div id="drawstock" style="width: 100%;height:600px;"></div>
    <div class="index-server">
      <div class="server-title">
        <h2 style="text-align: center;font-weight: bold; color:#3F4A57;margin-top: 50px;">量化投资</h2>
        <div class="split-line"></div>
      </div>
      <div class="server-contain">
        <ul>
          <li style="padding-bottom:60px;">
            <div></div>
            <h4>海量金融数据</h4>
            <p>平台拥有国内A股3610支自2016年至今的分钟级别数据，累计超过8亿条基础数据。</p>
          </li>
          <li>
            <div></div>
            <h4>策略研究平台</h4>
            <p>基于Java的研究平台，支持基本的策略函数接口，清晰的接口文档。</p>
          </li>
          <li>
            <div></div>
            <h4>高效回测引擎</h4>
            <p>极速精准的回测引擎，快速实现各类选股、择时、对冲策略，输出专业完成的分析报告。</p>
          </li>
          <!-- <li class="second-two">
            <div></div>
            <h4>模拟交易所</h4>
            <p>完整复制交易所撮合机制，独立的模拟证券账户体系，回测与交易的跟踪误差一目了然。</p>
          </li> -->

          <li class="second-two">
            <div></div>
            <h4>优质策略广场</h4>
            <p>策略开发者自主研发，经投资管理人推荐精选策略，免费分享订阅。</p>
          </li>
        </ul>
      </div>
    </div>

    <footer class="footer">
      <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
        <div style="display:flex;flex-direction:row;justify-content:center;margin-right: 50px;">
          <div class="font">关于我们:</div>
          <div class="font">FPS精英团队</div>
        </div>
        <div style="display:inline-block;display:flex;flex-direction:row;justify-content:center;align-items:center;">
          <div style="display: inline-block;" class="font">联系我们：</div>
          <img
            style="display: inline-block;width: 100px;height: 100px;"
            src="../../../static/image/qunliaoerweima.png"
          />
        </div>
      </div>
    </footer>
  </div>
</template>
<style scoped>
.el-input__inner{
  width: 400px;
}
.footer {
  height: 130px;
  width: 100%;
  background-color: #0d1c30;
  text-align: center;
  padding-top: 17px;
}
.footer span {
  font-size: 15px;
  color: white;
  padding: 0px 60px;
}
.font {
  color: white;
  font-size: 15px;
}
.btn {
  display: inline-block;
  margin-left: 50px;
  padding: 6px 20px;
  border-radius: 4px;
  background-color: #3C7EEE;
  color: #fff;
  cursor: pointer;
  width: 130px;
}
.index-server {
  font-size: 0;
  text-align: center;
  width: 100%;
  background: #fff;
  clear: both;
}
.index-server .server-title p {
  font-size: 24px;
  color: #676a74;
}
.index-server .server-contain {
  width: 100%;
  margin: 0 auto;
  height: calc(100% - 116px);
  margin-bottom: 50px;
}
.index-server .server-contain ul li > div {
  width: 80px;
  height: 65px;
  margin: 20px auto 0;
  background: url(//i.thsi.cn/images/quant/home/20180426/sever-icon.png)
    no-repeat;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.index-server .server-contain ul li h4 {
  font-size: 20px;
  color: #000;
  margin: 25px 0px;
  line-height: 36px;
  font-weight: normal;
}
.index-server .server-contain ul li p {
  font-size: 17px;
  color: #919198;
  padding: 0 35px;
  text-align: left;
}
.index-server .server-contain ul li {
  width: calc(100% / 4);
  float: left;
  box-sizing: border-box;
}
.index-server .server-contain ul li:nth-child(3) div {
  background-position: -31px -89px;
}
.index-server .server-contain ul li:first-child div {
  background-position: -147px -19px;
}
.index-server .server-contain ul li:nth-child(2) div {
  background-position: -336px -19px;
}
.index-server .server-contain ul li:nth-child(4) div {
  background-position: -31px -19px;
}
.index-server .server-contain ul li:nth-child(5) div {
  background-position: -248px -19px;
}
</style>
<style>
.el-range-separator{
  width: 10%;
}
.el-range-editor.el-input__inner {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}
.el-scrollbar__view{
    margin-bottom: 21px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      time:'',
      stocknumber:'',
      stocknumberList:'',
      StrategyData:'',
      data:'',
      TimeCycle:'',
      pickerDisabled: {
        disabledDate:(time) => {
          return time.getTime() > new Date() * 1 + 600 * 1000;
        }
      },
    };
  },
  mounted() {
    this.draw()
    this.getStocknumberData()
  },
  methods: {
    handleSelect(item) {
      console.log(item);
      this.stocknumber = item.stocknumber
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    // 获取股票代码下拉
    getStocknumberData(queryString, cb){
      this.$http.get('stock/listByStockNameOrStockNumber?keyword='+this.stocknumber+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.stocknumberList = resp.data.data
          cb(this.stocknumberList)
        } else {
          this.$message(resp.data.msg)
        }
      })
      
    },
    getStrategyData(){
      let sdate = (this.time[0]).valueOf()
      let edate = (this.time[1]).valueOf()
      // this.$http.post('getListByDateTime?stock=000001&startDate='+sdate+'&endDate='+edate+'&timeCycle=1').then((resp) => {
      this.$http.post('getListByDateTime?stock='+this.stocknumber+'&startDate='+sdate+'&endDate='+edate+'&timeCycle='+this.TimeCycle+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.StrategyData = resp.data.data
          for (var i = 0; i < this.StrategyData.length; i++) {
            var time = new Date(this.StrategyData[i].mdate)
            var y = time.getFullYear()
            var m = time.getMonth() + 1
            var d = time.getDate()
            var h = time.getHours()
            var mm = time.getMinutes()
            this.StrategyData[i].mdate = y+"-"+m+"-"+d+" "+h+":"+mm
            delete this.StrategyData[i].mid;
          }
          let arr = []
          for (let i in this.StrategyData) {
            // this.categoryData.push(this.StrategyData[i].mdate)
            // this.values.push(this.StrategyData[i].mopen+','+this.StrategyData[i].mclose+','+this.StrategyData[i].mlow+','+this.StrategyData[i].mhigh)
            // this.categoryData.push(this.StrategyData[i].splice(0, 1)[0]);
            // this.values.push(this.StrategyData[i])
            // obj[i].mdate = this.StrategyData.mdate
            arr.push(Object.values(this.StrategyData[i])); //属性
          }
          this.data = arr
          // this.StrategyData = splitData(arr);
          this.draw()
          // console.log(data0);
          // console.log(typeof data0);
          // console.log(this.categoryData,this.values)
        } else {
          this.$message(resp.data.msg)
        }
      })
    },
    draw() {
      var upColor = "#ec0000";
      var upBorderColor = "#8A0000";
      var downColor = "#00da3c";
      var downBorderColor = "#008F28";

      // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
      var data0 = splitData(this.data)
      console.log(data0)
      function splitData(rawData) {
        var categoryData = [];
        var values = [];
        for (var i = 0; i < rawData.length; i++) {
          categoryData.push(rawData[i].splice(0, 1)[0]);
          values.push(rawData[i]);
        }
        return {
          categoryData: categoryData,
          values: values
        };
      }

      function calculateMA(dayCount) {
        var result = [];
        for (var i = 0, len = data0.values.length; i < len; i++) {
          if (i < dayCount) {
            result.push("-");
            continue;
          }
          var sum = 0;
          for (var j = 0; j < dayCount; j++) {
            sum += data0.values[i - j][1];
          }
          result.push(sum / dayCount);
        }
        return result;
      }

      this.charts = this.$echarts.init(document.getElementById("drawstock"));
      this.charts.setOption({
        // title: {
        //     text: '上证指数',
        //     left: 0
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["日K", "MA5", "MA10", "MA20", "MA30"]
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%"
        },
        xAxis: {
          type: "category",
          data: data0.categoryData,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          splitNumber: 20,
          min: "dataMin",
          max: "dataMax"
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 50,
            end: 100
          },
          {
            show: true,
            type: "slider",
            top: "90%",
            start: 50,
            end: 100
          }
        ],
        series: [
          {
            name: "日K",
            type: "candlestick",
            data: data0.values,
            itemStyle: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor
            },
            markPoint: {
              label: {
                normal: {
                  formatter: function(param) {
                    return param != null ? Math.round(param.value) : "";
                  }
                }
              },
              data: [
                {
                  name: "XX标点",
                  coord: ["2013/5/31", 2300],
                  value: 2300,
                  itemStyle: {
                    color: "rgb(41,60,85)"
                  }
                },
                {
                  name: "highest value",
                  type: "max",
                  valueDim: "highest"
                },
                {
                  name: "lowest value",
                  type: "min",
                  valueDim: "lowest"
                },
                {
                  name: "average value on close",
                  type: "average",
                  valueDim: "close"
                }
              ],
              tooltip: {
                formatter: function(param) {
                  return param.name + "<br>" + (param.data.coord || "");
                }
              }
            },
            markLine: {
              symbol: ["none", "none"],
              data: [
                [
                  {
                    name: "from lowest to highest",
                    type: "min",
                    valueDim: "lowest",
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: false
                      }
                    }
                  },
                  {
                    type: "max",
                    valueDim: "highest",
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: false
                      }
                    }
                  }
                ],
                {
                  name: "min line on close",
                  type: "min",
                  valueDim: "close"
                },
                {
                  name: "max line on close",
                  type: "max",
                  valueDim: "close"
                }
              ]
            }
          },
          {
            name: "MA5",
            type: "line",
            data: calculateMA(5),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: "MA10",
            type: "line",
            data: calculateMA(10),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: "MA20",
            type: "line",
            data: calculateMA(20),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: "MA30",
            type: "line",
            data: calculateMA(30),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          }
        ]
      });
    }
  }
};
</script>
